<template>
	<div class="search-box">
		<div class="row">
			<div class="mb-3 col-auto">
				<input type="text" class="form-control" :placeholder="$t('keywords') + ': ' + $t('name')"
					v-model="conditions.name" @keyup.enter="search">
			</div>

			<div class="mb-3 col-auto">
				<button class="btn btn-success" @click="search">
					{{ $t('search') }}
				</button>
			</div>
		</div>
	</div>


	<Pagination :page-info="pageInfo" :get-page-url="getPageUrl"></Pagination>


	<div class="contest-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th></th>
					<th>ID</th>
					<th>{{ $t('name') }}</th>
					<th>{{ $t('tag') }}</th>
					<th>{{ $t('accepted') }}</th>
					<th>{{ $t('submit') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in problems" :key="item.id" @click="toProblemPage(item.id)"
					@contextmenu.prevent="toProblemPage(item.id, true)">
					<th scope="row" style="text-align: center">
						<span class="fa fa-check" style="color: green" v-if="item.solved"></span>
						<!-- <span class="fa fa-close" style="color: red"></span> -->
						<!-- <span class="fa fa-remove" style="color: red"></span> -->
					</th>
					<td class="link-color">
						{{ item.id }}
					</td>
					<td class="link-color">
						{{ item.name }}
					</td>
					<td>
						<a v-for="tag in item.tags" class="tag tag-primary" :href="'/problems?tag=' + tag">
							{{ $t('problem.' + tag) }}
						</a>
					</td>
					<td style="color: #28A745">
						{{ item.accepted }}
					</td>
					<td>{{ item.submit }}</td>
				</tr>
			</tbody>
		</table>
	</div>

	<Pagination :page-info="pageInfo" :get-page-url="getPageUrl" />
</template>


<script type="module">
import Pagination from '@/components/Pagination.vue';
import {ProblemService, UserService, Router} from '@/common/common.object'
import { pageInfo } from '@/common/pagination';
import { store } from '@/common/store';

export default {
	data() {
		return {
			problems: null,
			pageInfo: null,
			conditions: {},
		};
	},
	components: {
		Pagination
	},
	created() {
		this.search();
	},
	methods: {
		toProblemPage(problemId, onNewPage = false) {
			this.$toPage(Router.page.problem(problemId), onNewPage);
		},
		getPageUrl(pageNumber, pageSize) {
			return Router.page.problems(pageNumber, pageSize);
		},
		search() {
			ProblemService.getPage(this.$route.pageSize, this.$route.pageNumber, this.conditions).then(result => {				
				this.pageInfo = pageInfo(result);
				this.problems = result.list;
			}).then(() => {
				if (store.notVisitor()) {
					UserService.solvedList().then(solvedList => {
						this.problems.forEach(item => {
							if (solvedList.includes(item.id)) {
								item.solved = true;
							}
						});
					}).catch(error => console.error(error));
				}
			});
		},
	}
}
</script>

<style scope>
table tr {
	line-height: 32px;
}

table>tbody>tr {
	cursor: pointer;
}

table>thead>tr>th {
	border-top: none !important;
}



.tag {
	display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
}

.tag:hover,
.tag:focus {
	color: #fff;
}

.tag-primary {
	margin-right: 6px;
	color: white;
	background-color: #337ab7;
}
</style>
